<template>
    <el-main>
        <el-card>
            <template #header>
            <div class="bt"> <span>课程列表</span></div>
            </template>

            <div class="nr" >
                <el-table :data="tableData">
                    <el-table-column prop="date" label="序号" width="80"></el-table-column>
                    <el-table-column prop="name" label="课程名称" width="180%"></el-table-column>
                    <el-table-column prop="time" label="创建时间" width="140"></el-table-column>
                    <el-table-column label="可见状态" width="120">
                            <el-switch v-model="value1"></el-switch>
                    </el-table-column>
                    <el-table-column label="操作">
                        <el-button><el-icon><EditPen /></el-icon></el-button>
                        <el-button><el-icon><Suitcase /></el-icon></el-button>
                        <el-button><el-icon><Monitor /></el-icon></el-button>
                        <el-button><el-icon><School /></el-icon></el-button>
                    </el-table-column>
                    
                </el-table>
                
            </div>
        </el-card>
    </el-main>
</template>

<script>
import {EditPen,Suitcase,Monitor,School} from '@element-plus/icons-vue'
import { ref } from 'vue'

export default {
    data(){
        return{
            tableData:[
                {date: '1',name: 'JAVA程序设计',time:'2020-12-12'},
                {date: '2',name: 'MySQL数据库技术',time:'2021-12-11'},
                {date: '3',name: 'Web前端开发基础',time:'2021-12-11'},
                {date: '4',name: 'Web前端开发实战',time:'2021-12-11'},],
            value1:ref(true)
        }            
    },
    components:{
        EditPen,
        Suitcase,
        Monitor,
        School
    },
    methods:{
        
    }
}
</script>

   

<style>
.bt{
   text-align: left;
}
.nr{
    height: 300px;
}
</style>